{%- capture crop_class -%}
{% if theme_config.global.product_details_size != '0' %}product_cardimg-picture-crop-{{theme_config.global.product_details_size}}{% endif %}
{%- endcapture -%} 
<div class="product_preview_right" style="--producr_details_fit:{{ theme_config.global.producr_details_fit }}">
  <div class="swiper-container" id="product_preview_{{blockId}}" style="width:100%">
    <ul class="swiper-wrapper" style="width:100%">
      {% for image in previewImage %}
        {%- if image.alt == "" -%}
          {% assign image_alt = product | image_alt:'product'  %}
        {%- else -%}
            {% assign image_alt = image.alt %}
        {%- endif -%}
        {% if image.file_type == "video" %}
          <li class="swiper-slide">
            <div class="product_preview-video-container swiper-slide-video product_preview-video{{blockId}}">
              <div style='position: relative;z-index: 10;' class="video-product_preview-box">
                <img style="width: 100%;height:100%;object-fit: cover;" class="video-product_preview-img" data-src="{{ image.src|public_front_asset_url }}" src="{{ 'empty.png' | public_asset_abs_dir_url }}" alt="{{ image_alt }}"/>
                {%- include 'default_icon', icon:"video", height:"48", width:"48" -%}
              </div>
              <video src="{{image.params.url|public_front_asset_url}}" controls="controls"></video>
            </div>
          </li>
        {% elsif image.file_type == "youtube" %}
          <li class="swiper-slide">
            <div class="product_preview-youtube-container">
              <iframe type="text/html" src="{{image.params.url}}?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
            </div>
          </li>
        {% else %}
          <li class="swiper-slide control-product_detail-picture_item {{crop_class}}" data-image-id="{{image.id}}">
            <a href="{{ productHref | default:'javascript:;'}}">
              <img style="width: 100%" data-src="{{ image.src|public_front_asset_url }}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" alt="{{ image_alt }}"/>
            </a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
  {% if previewImage.size > 1  %}
    <div class="product-swiper-small {% if mobile_thumbnail == 'show' %}show_mobile_thumbnail{% endif %}" id="product_preview_small_{{blockId}}">
      <div class="navigation " id="prev_{{blockId}}" style="display: none;">
        {% include "icon_silde_left" , width:'24',height:'24' %}
      </div>
      <div class="arrow arrow-prev" data-type="prev">
        {%- include 'default_icon', icon:"prev", height:"24", width:"24" -%}
      </div>
      <div class="swiper-container-small swiper-small{{blockId}}">
        <ul class="swiper-wrapper">
          {% for image in previewImage %}
            {%- if image.alt == "" -%}
              {% assign image_alt = product | image_alt:'product'  %}
            {%- else -%}
                {% assign image_alt = image.alt %}
            {%- endif -%}
            {% if image.file_type == "video" or image.file_type ==  "youtube" %}
              <li class="swiper-slide swiper-slide-video swiper-small-item">
                {%- include 'default_icon', icon:"video", height:"32", width:"32" -%}
                <img style="width: 100%" data-src="{{ image.src|public_front_asset_url }}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" alt="{{ image_alt }}"/>
              </li>
            {% else %}
              <li class="swiper-slide swiper-small-item">
                <img style="width: 100%" data-src="{{ image.src|public_front_asset_url }}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" alt="{{ image_alt }}"/>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
      <div class="arrow arrow-next" data-type="next">
        {%- include 'default_icon', icon:"next", height:"24", width:"24" -%}
      </div>
      <div class="navigation " id="next_{{blockId}}" style="display: none;">
        {% include "icon_silde_right" , width:'24',height:'24' %}
      </div>
    </div>
  {% endif %}
</div>
<script>
  (function() {
    var blockId = "{{blockId}}";
    var previewImage = {{previewImage|pubic_front_imgcdn_replace|json}};
    var showSmall = "{{ showSmall | default:false}}";
    var video = $(".product_preview-video" + blockId);
    var productPreviewNode = $("#product_preview_" + blockId);
    video.click(function() {
      var video = $(this).find("video");
      var videoIcon = $(this).find(".video-icon");
      if ($(this).find(".video-product_preview-img")) {
        $(this).find(".video-product_preview-img").css('visibility', 'hidden');

      }
      video.css({'z-index': '20', "position": "absolute"})
      videoIcon.hide()
      video[0].play()
    })
    video.find("video").each(function(key, item) {
      var videoIcon = $(this).siblings(".video-product_preview-box").find(".video-icon");
      item.addEventListener("play", function() {
        $(this).css({'z-index': '20', "position": "absolute"})
        videoIcon.hide()
      })
      item.addEventListener("pause", function() {
        $(this).css({'z-index': '1', "position": "absolute"})
        videoIcon.show()
      })
    });
    if (previewImage.length) {
      var swiperSmallNode = $(".swiper-small" + blockId);
      function isShowNavigation(argument) {
        if ($(window).width() > 767) {
          const li = swiperSmallNode.find('li');
          if (swiperSmallNode.width() < li.length * (li.innerWidth() + 10)) {
            $('#next_' + blockId).show()
            $('#prev_' + blockId).show()
          } else {
            $('#next_' + blockId).hide()
            $('#prev_' + blockId).hide()
          }
        } else {
          $('#next_' + blockId).hide()
          $('#prev_' + blockId).hide()
        }
      }
      $(window).resize(function() {
        isShowNavigation()
      })
      isShowNavigation();
    }
    function pauseVideo() {
      var video = productPreviewNode.find(".swiper-slide-video").find("video");
      for (var i = 0; i < video.length; i++) {
        var element = video[i];
        element.pause()
      }
      var youtube = productPreviewNode.find("iframe");
      for (var i = 0; i < youtube.length; i++) {
        var element = youtube[i];
        var func = 'pauseVideo';
        element.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
      }
    }
    var smallIndex = 0;
    function setSmallClass(index) {
      if (previewImage.length && showSmall) {
        $(".swiper-small-item").eq(index).addClass("active").siblings().removeClass("active");
      }
    }
    var mySwiperSmall = new Swiper(".swiper-small" + blockId, {
      spaceBetween: 10,
      slidesPerView: 'auto',
      direction: 'vertical',
      slideToClickedSlide: true,
      normalizeSlideIndex: false,
      centerInsufficientSlides: true,
      navigation: {
        nextEl: '#next_' + blockId,
        prevEl: '#prev_' + blockId
      },
      on: {
        tap: function(swiper, event) {
          mySwiper.slideTo(mySwiperSmall.clickedIndex)
          setSmallClass(mySwiperSmall.clickedIndex)
          pauseVideo();
        }
      },
      breakpoints: {
        768: {
          direction: "horizontal"
        }
      }
    })

    {% if source == "product_detail" %}
      var swiperImg = $('#product_preview_' + blockId).find(".swiper-slide img");
      swiperImg.click(function () {
        const JqThis = $(this);
        const parentIndex = swiperImg.index($(this));
        moi.pictureImages( previewImage.filter(item=>item.file_type === "image").map(el=>el.src) , parentIndex, JqThis)
      })
    {% endif %}
    var mySwiper = new Swiper('#product_preview_' + blockId, {
      autoHeight: true,
      updateOnImagesReady: true,
      on: {
        init() {
          setSmallClass(0)
        },
        slideChangeTransitionStart() {
          if (previewImage.length && showSmall) {
            smallIndex = this.activeIndex;
            setSmallClass(this.activeIndex);
            mySwiperSmall.slideTo(this.activeIndex);
          }
          pauseVideo();
          $('.arrow-prev').find('path').css({"fill": "#1d1f21"})
          $('.arrow-next').find('path').css({"fill": "#1d1f21"})
          if (this.isBeginning) {
            $('.arrow-prev').find('path').css({"fill": "#999999"})
          }
          if (this.isEnd) {
            $('.arrow-next').find('path').css({"fill": "#999999"})
          }
        }
      }
    })
    moi.addEvent('lazyImg', function(event) {
      if (event.params && previewImage.findIndex(item => item.src == event.params) > -1) {
        mySwiper.updateAutoHeight()
      }
    })
    $('#product_preview_small_' + blockId + ' .arrow').click(function(event) {
      event.stopPropagation()
      const type = $(this).data("type");
      if (type === "next" && smallIndex < Number("{{ product.images | size}}")) {
        smallIndex++;
      }
      if (type === "prev" && smallIndex) {
        smallIndex--;
      }
      mySwiper.slideTo(smallIndex)
      setSmallClass(smallIndex)
    })
    moi.addEvent('productOptionChange', function(event) {
      var params = event.params;
      if (params.block_id == blockId && params.image && params.image.src) {
        var index = previewImage.findIndex(el => el.src === params.image.src);
        setSmallClass(index)
        mySwiper.slideTo(index)
        pauseVideo();
      }
    })
  })()
</script>
